<template>
   <div>
     <el-form label-width="120px">
        <!-- <el-form-item label="模板首页">
          <el-input v-model="Temfrom.HomepageName" readonly></el-input>
        </el-form-item> -->
         <el-form-item label="模板图片">
          <div class="flex">
            <el-input v-model="Temfrom.templateImg"></el-input>
            <Upload :type="'primary'" @confrim="confrimTemplate" :text="'上传图片'"></Upload>
          </div>
        </el-form-item>
        <el-form-item label="模板名称">
          <el-input v-model="Temfrom.templateName" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="模板类型" >
           <el-select v-model="Temfrom.type" placeholder="请选择">
              <el-option
                label="网页"
                :value="1">
              </el-option>
              <el-option
                label="手机"
                :value="2">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="模板创建人">
          <el-input v-model="Temfrom.updateBy" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="操作权限">
          <el-switch
      v-model="Temfrom.isPassword"
       :active-value="1"
      :inactive-value="2"
      active-text="私有"
      inactive-text="公有">
    </el-switch>
        </el-form-item>
        <el-form-item v-if="Temfrom.isPassword==1" label="模板密码">
          <el-input v-model="Temfrom.password" maxlength="12"></el-input>
        </el-form-item>
        <el-form-item class="flex-end">
          <el-button type="primary" size="small" @click="Templatesave"
            >确定</el-button
          >
        </el-form-item>
      </el-form>

   </div>
</template>

<script>
import { client, getFileNameUUID } from "../Upload/alioss.js";
import Upload from "../Upload/index.vue";
import axios from "axios";
import api from '@/api/models/api.js'

export default {
    components:{Upload},
    props:['id','TemplateData'],
 data() {
    return {

        Temfrom: {
        // HomepageName: localStorage.getItem("pageName"),
        globalcanvasData: "",
        canvasData: "",
        type:1,
        isPassword:1,
        password:"",
        templateName: "",
        templateImg:"",
        updateBy: "",
      },
    }
 },
 created(){
    console.log(this.id)
    if(this.TemplateData){//编辑
     this.Temfrom=this.TemplateData
    }
 },
 methods:{
     async uploadURL(file, name) {

     return new Promise((resolve,reject)=>{
        var fileName = "json/" + name;
          //定义唯一的文件名，打印出来的uid其实就是时间戳
          client()
            .multipartUpload(fileName, file, {
              progress: function (percentage, cpt) {
                console.log("打印进度", percentage);
              },
            })
            .then((res) => {
              console.log(res, "上传成功");
              //此处赋值，是相当于上传成功之后，手动拼接服务器地址和文件名
              let url =
                "https://ejarwebtools.oss-cn-hangzhou.aliyuncs.com/" + res.name;
              console.log(url);
              resolve(url)
            });
     })

    },
   async editTemplate(){
       api.updateTemplate(this.Temfrom).then(res=>{
           if(res.code==200){
             this.$message.success(res.data||res.message)
              this.$emit('closeTK')
            }else{
                this.$message.error(res.msg||res.message)
            }
       })
    },
      async Templatesave() {
        if(this.Temfrom.isPassword==1&&!this.Temfrom.password){
          this.$message.error('请输入密码!')
          return
        }else if(!this.Temfrom.templateName){
           this.$message.error('创建模板名称不能为空')
          return
        }
        if(this.TemplateData){
          this.editTemplate()
          return
        }


      if(this.id){
              const GlobalcanvasData = localStorage.getItem("GlobalcanvasData");
              const canvasData = localStorage.getItem("canvasData");
              const Bigblob = new Blob([GlobalcanvasData], {
                type: "application/json",
              });
              const Indexblob = new Blob([canvasData], { type: "application/json" });
              // FileSaver.saveAs(blob, `GlobalcanvasData.json`)
              this.Temfrom.globalcanvasData = await this.uploadURL(
                Bigblob,
                this.Temfrom.templateName+'_globale'+ ".json"
              );
              this.Temfrom.canvasData = await this.uploadURL(
                Indexblob,
              this.Temfrom.templateName+'_Index' + ".json"
              );
              this.$confirm("保存模板前请已经确认页面预览正确", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
              if (this.Temfrom.globalcanvasData && this.Temfrom.canvasData) {
                api.saveTemplate({
                    ...this.Temfrom,
                    id: this.id?this.id:'',
                  }).then(res=>{
                  console.log(res)
                  if(res.code==200){
                    this.$message.success(res.data||res.message)
                    this.$emit('closeTK')
                  }else{
                    this.$message.error(res.msg||res.message)
                  }
                })

              }
            });
      }else{
            // const canvasData = localStorage.getItem("canvasData");
            // const Indexblob = new Blob([canvasData], { type: "application/json" });
            // this.Temfrom.canvasData = await this.uploadURL(Indexblob,this.Temfrom.templateName+'Index' + ".json");
            this.Temfrom.canvasData = "[]"
          api.addTemplate({
              ...this.Temfrom
            }).then(res=>{
            console.log(res)
            if(res.code==200){
              this.$message.success(res.data||res.message)
              this.$emit('closeTK')
            }else{
                this.$message.error(res.msg||res.message)
            }
          })
      }


    },
    confrimTemplate(e){
      this.Temfrom.templateImg=e
    },
 }
}
</script>

<style>

</style>
